﻿@{
    ViewBag.Title = "幻灯片管理";
}
@section styles{
    <style>
        table tbody tr.slider_item td {
            /*border: 1px solid #eaeaea;
            padding: 20px;
            margin: 0 0 10px 0;*/
            height: 125px;
            line-height: 125px;
            /*display: table-cell;*/
            text-align: center;
            font-size: 12px;
        }

        .under_line {
            color: #808080;
        }

            .under_line:hover {
                text-decoration: underline;
            }
    </style>
}
<div class="am-cf am-padding">
    <div class="am-fl am-cf">
        <strong class="am-text-primary am-text-lg">设置</strong> / 
        <small>幻灯片</small>
    </div>
</div>
<div class="am-g" ms-controller="slider">
    <div class="am-u-sm-8">
        <table class="am-table am-table-bordered">
            <thead>
            <tr>
                <th style="width: 40px;"></th>
                <th style="width: 120px;">ID</th>
                <th>标题</th>
                <th style="width: 120px;">略缩图</th>
                <th style="width: 120px;"></th>
            </tr>
            </thead>
            <tbody>
            <tr ms-repeat="slider_list" class="slider_item">
                <td></td>
                <td>{{el.ID}}</td>
                <td style="text-align: left;">{{el.Title}}</td>
                <td>
                    <a ms-attr-href="'/image?path='+el.FirstPicture" target="_blank">
                        <img ms-attr-src="'/image?path='+el.FirstPicture +'&w=100&h=100'"
                             class="am-img-thumbnail am-img-bdrs"/>
                    </a>
                </td>
                <td>
                    <a ms-attr-href="'/site/editslider?slideID='+el.ID" class="am-text-success">编辑</a> |
                    <a href="###" class="am-text-danger" ms-click="remove_slider(el)">
                        <span class="am-icon-trash-o am-text-danger"></span>&nbsp;删除
                    </a>
                </td>
            </tr>
            </tbody>
        </table>
        <div id="list_page"></div>
    </div>
    <div class="am-u-sm-4">
        <section data-am-widget="accordion" class="am-accordion am-accordion-gapped" data-am-accordion='{  }'>
            <dl class="am-accordion-item am-active">
                <dt class="am-accordion-title">添加幻灯片</dt>
                <dd class="am-accordion-bd am-collapse am-in">
                    <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
                    <div class="am-accordion-content">
                        <form class="am-form">
                            <div class="am-form-group am-form-icon am-form-feedback">
                                <label class="am-form-label">显示标题</label>
                                <input type="text" class="" ms-duplex="new_slider.Title">
                                @*<span class="am-icon-check"></span>*@
                            </div>
                            <div class="am-form-group">
                                <label class="am-form-label">链接地址</label>
                                <input type="text" class="am-form-field" ms-duplex="new_slider.LinkURL">
                            </div>
                            <div class="am-form-group" style="height: 40px;">
                                <div class="am-u-sm-5 am-form-file" style="padding: 0;">
                                    <button type="button" class="am-btn am-btn-danger am-btn-sm">
                                        <i class="am-icon-cloud-upload"></i>&nbsp;选择幻灯片图片
                                    </button>
                                    <input id="coverEl" type="file" onchange="upload_file(this)" />
                                </div>
                            </div>
                            <div class="am-form-group" style="height: 30px;">
                                <a href="###" ms-if="new_slider.FirstPicture != null"
                                    data-am-modal="{target: '#first_picture_preview', closeViaDimmer: 0, width: 1200, height: 540}">查看图片</a>
                                <a href="###" ms-click="edit_first_pictrue" ms-if="new_slider.FirstPicture != null">编辑图片</a>
                            </div>
                            <div style="text-align: right">
                                <button type="button" class="am-btn am-btn-primary" ms-click="save_new_slider">添加幻灯片</button>
                            </div>
                        </form>
                    </div>
                </dd>
            </dl>
        </section>
    </div>
    <div class="am-modal am-modal-no-btn" tabindex="-1" id="first_picture_preview">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">
                幻灯片图片预览
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div class="am-modal-bd">
                <a ms-attr-href="'/image?path=' + new_slider.FirstPicture" target="_blank">
                    <img ms-if="new_slider.FirstPicture"
                        style="max-width: 1200px; max-height: 450px;"
                        ms-attr-src="'/image?path=' + new_slider.FirstPicture" />
                </a>
            </div>
        </div>
    </div>
</div>
@Scripts.Render("~/Content/js/common/file-upload.js")
<script src="~/Content/js/site/slider.js"></script>
